<!--
 * @Author: wangming
 * @Date: 2021-05-27 14:01:15
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-22 17:01:49
 * @Description: file content
-->
<template>
  <el-form class="max sz" :model="formDate" ref="form" size="small">
    <el-row class="search_layout">
      <el-col
        v-for="(i, index) in config.childrens"
        :key="i.key"
        :span="span"
        @click.native.stop="clickAdd({ newIndex: index })"
        ><searchItemDesgin
          isEdit
          :itemChecked="i.key === getModelForm.key"
          :class="{ active: i.key === getModelForm.key }"
          @deltag="deltag(index, config.childrens)"
          class="elbox rel sz mover"
          :key="i.key"
          :config="i"
        ></searchItemDesgin
      ></el-col>
      <!-- <el-col :span="span" :offset="btnOffset"> -->
        <div class="design-search-btn pl10 pr10" :style="{'text-align': config.__config.searchBtnPos}">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </div>
      <!-- </el-col> -->
    </el-row>
  </el-form>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import searchItemDesgin from "./_components/index.vue";
export default {
  components: {
    searchItemDesgin,
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          childrens: [],
          __config: {},
        };
      },
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(["getModelForm", "getFormId", "getModelTreeList"]),
    span() {
      return Math.floor(
        24 /
          (this.config.__config.singleQuantity
            ? this.config.__config.singleQuantity
            : this.config.__config.singleQuantityCustom)
      );
    },
    btnOffset() {
      return (
        this.span *
        (24 / this.span -
          1 -
          (this.config.childrens?.length %
            (this.config.__config.singleQuantity
              ? this.config.__config.singleQuantity
              : this.config.__config.singleQuantityCustom)))
      );
    },
  },
  data() {
    return {
      formDate: {},
    };
  },
  methods: {
    ...mapActions(["setModelForm"]),
    clickAdd(v) {
      this.handleAdd(v, this.config.childrens);
    },
    //布局内的点击事件
    async handleAdd({ newIndex }, children) {
      let form = children[newIndex];
      if (children[newIndex].tagName === "SearchStaffSelect") {
        form = {
          ...form,
          deptList:this.config.childrens.filter((item) => {
            return item.tagName === "SearchDepartmentSelect" && item.fieldCode;
          }),
        };
      }
      if (form.key !== this.getModelForm.key) {
        this.setModelForm({});
        await this.$nextTick();
      }
      this.setModelForm(form);
    },
    deltag(index, children) {
      let form = children[index];
      //删除选中项
      if (form.key === this.getModelForm.key) {
        this.setModelForm({});
      }
      children.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 100%;
  border: 1px solid #f1f1f1;
}
.formbox {
  min-height: 100px;
}
.design-search-btn {
  // width: 100%;
  // height: 100%;
  // float: right;
  flex: 1 1 auto;
  min-height: 70px;
  padding-top: 12px;
}
.search_layout {
  display: flex;
  flex-wrap: wrap;
}
</style>
